<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

        #startBtn {
            width: 180px;
            height: 50px;
            margin-left: 2%;
            margin-top: 50px;
            /* background-color: gray; */
            font-weight: bold;
            font-size: medium;

        }
    </style>
</head>
<body>
<button id="startBtn">开始一个番茄</button>

<script>

    var button = document.getElementById('startBtn');

    button.addEventListener('click', function () {
        if (window.Notification && Notification.permission === "granted") {
            startTomato();

        }
        else if (window.Notification && Notification.permission !== "denied") {
            Notification.requestPermission(function (status) {
                // 如果用户同意了
                if (status === "granted") {
                    startTomato();

                }
            });
        }

    });

    var startTimeStr;
    var endTimeStr;

    function startTomato() {
        startTimeStr = formatTime(new Date());
        var startNoti = new Notification('番茄开始', {body: startTimeStr + '开始一个番茄'});

        setTimeout(function () {
            endTimeStr = formatTime(new Date());
            var endNoti = new Notification('番茄结束', {body: startTimeStr + '到' + endTimeStr + '的番茄已结束'});
            endNoti.onclick = function () {
                alert("结束")
            };
        }, 1000 * 60 * 25);
    }

    function formatTime(d) {
        return d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    }
</script>
</body>
</html>